<template>
  <div class="RxAppPortal">
    <rx-layout>
      <template v-slot:header>
        <div class="rx-header" :style="{'padding-top':top+'px'}">
          <my-icon @click="retreat" type="icon-jiantou_liebiaoxiangzuo"></my-icon>
          <div class="rx-header-name">{{i18n('RxAppPortal','我的应用')}}</div>
        </div>
      </template>
      <template v-slot:center>
        <div v-if="portalList.length==1&&portalList&&portalList.length>0">
          <rx-portal :portal="portalList[0]" slot="center"/>
        </div>
        <div class="RxAppPortal-contend" v-else-if="portalList.length>1">
          <div>
            <ul class="rx-navTab">
              <li v-for="(portal,index1) in portalList" :key="index1"
                  :class="[index1==activeIndex?'active':'']">
                <span @click="handleActive(index1)">{{ $i18(portal.name,'门户名称') }}</span>
              </li>
            </ul>
          </div>
          <div style="flex: 1;overflow: auto">
            <div :key="index" v-for="(portal,index) in portalList">
                <rx-portal v-if="index==activeIndex" :portal="portal"/>
            </div>
              <view class="rx-empty" v-if="portalList.length===0 && empty">
                  <image src="@/static/empty.png"/>
                  <span class="rx-empty-name">{{i18n('configureMobile','请前往平台门户中心配置移动门户')}}</span>
              </view>
          </div>
        </div>
      </template>
    </rx-layout>
  </div>
</template>

<script>
import GatewayApi from "@/api/Gateway/GatewayApi";
import RxPortal from "@/pages/RxGateway/RxPortal";
import RxLayout from '@/components/RxLayout'
import Util from "@/js/Util";
export default {
  name: "RxAppPortal",
  data(){
    return{
      portalList:[],//门户列表
      activeIndex: 0,
      top:0,
      empty:false,
    }
  },
  components:{
    RxPortal,
    RxLayout
  },
  created(){
    this.getInfo();
  },
  mounted(){

  },
  methods:{
    i18n(name,text,key){
      return this.$ti18(name,text,"mobileLang",key);
    },
    getInfo(){
      //获取手机顶部安全区域
      this.top = uni.getSystemInfoSync().safeAreaInsets.top;
      let appId = uni.getStorageSync("mobileAppId");
      if(!appId){
          appId = Util.getAppId(this)
      }
      GatewayApi.listMobilePortals(appId).then(res=>{
        if(res.success){
          this.portalList = res.data;
            this.empty = true;
        }
      })
    },
    handleActive(index) {
      this.activeIndex = index
    },
    retreat(){
      uni.setStorage({key: "mobileAppId", data: ''});
      uni.switchTab({
        url: '/pages/RxWorkbench'
      });
    }
  }
}
</script>

<style scoped>
.rx-empty{
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
.rx-empty image{
    width: 18rem;
}
.rx-empty-name{
    font-size: 0.8rem;
    margin-top: -1rem;
    text-align: center;
    width: 80%;
    color: rgb(122, 126, 131);
}
.RxAppPortal-contend{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.RxAppPortal{
  height: 100%;
  overflow: auto;
}
.rx-navTab {
  background: #f4f5f6;
  padding: .4rem .8rem;
  color: #555;
  white-space: nowrap;
  overflow-x: scroll;
  display: flex;
}

.rx-navTab li {
  padding: .2rem .6rem;
  border-radius: 1rem;
  margin-right: .4rem;
  display: inline-block;
  justify-content: left;
}

.rx-navTab li.active {
  background-image: linear-gradient(to right, #007aff, #00c2ff);
  color: white;
}
.rx-header{
  height: 44px;
  display: flex;
  align-items: center;
  background: rgb(0, 122, 255);
}
.RxAppPortal>>>.RxLayout-header{
  padding: 0px!important;
  background: rgb(0, 122, 255)!important;
}
.rx-header i{
  color: white;
  font-size: 1rem;
    margin-left: 0.5rem;
}
.rx-header-name{
    font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
  text-align: center;
  color: white;
}
</style>
